<template>
  <div class="article-simple" v-if="value">
    <a href="#"
       @click="readMore"
       class="article-simple-img"
       :style="{backgroundImage: value.cover?`url(${value.cover})`:`url(/image/article/demo-p1.jpg)`}"
    ></a>
    <div class="milk-article-body">
      <h4 class="article-heading" @click="readMore"><a href="javascript:void(0)">{{ value.title }}</a></h4>
      <div class="article-meta">
        <a href="#"><span
            class="far fa-calendar-alt"></span><span>{{ value.createTime.split('.')[0].split('T')[0] }}</span></a>
        <a href="#"><span
            class="far fa-laugh-wink"></span><span>{{ value.user ? value.user[0].userName : 'Daisy' }}</span></a>
        <a href="#"><span class="far fa-comment"></span>{{
            value.commentCount ? value.commentCount : 0
          }}<span></span></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MilkArticleSimple',
  props: {
    value: Object
  },
  methods: {
    readMore () {
      this.$router.push({
        path: '/article/' + this.value._id
      })
    }
  }
}
</script>

<style src="../../../common/css/article.css"></style>
<style>
/*article-simple START*/
.article-simple {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.article-simple-img {
  flex: 0 0 105px;
  height: 86px;
  margin-right: 12px;
  border-radius: 16px;
  background-size: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.article-simple .article-heading {
  font-size: 14px;
}

.article-simple .article-meta a {
  margin-right: 7px;
  font-size: 12px;
}

.article-simple .iconfont {
  margin-right: 1px;
  font-size: 12px;
}

.article-simple .milk-article-body{
  padding: 10px 0 0 14px;
}

/*article-simple END*/
</style>
